import { inject, onMounted, ref, computed } from "vue"
import { mapStore } from "@/store"
export const toolMap = () => {
    let map
    const selectLists = ref([])
    const store = mapStore()
    onMounted(() => {
        map = inject('$map')
    })
    const tool = () => {
        store.isClickTool = !store.isClickTool
        // if (map.value.getStyle().layers.length > 134) {
        //     const layers = map.value.getStyle().layers
        //     const layer = layers.reverse()
        //     map.value.removeLayer(layer[0].id)
        // }
    }
    // 拉框查询
    const selectQuery = () => {
        // var Draw = new MapboxDraw();
        // map.addControl(Draw, 'bottom-left');
        // map.on('draw.create', evt => {
        //     store.isSelected = true
        //     var features = Draw.getAll();
        //     // 获取到坐标
        //     var position = features.features[0].geometry.coordinates
        //     // 转换为turf -- polygon对象 判断要素在不在polygon对象中
        //     let polygon = turf.polygon(position)
        //     // 获取事件event的feature
        //     let layers = map.getStyle().layers
        //     let layers_id = layers.filter(item => item.id.startsWith('event'))
        //     layers_id.forEach(layer => {
        //         let features = map.queryRenderedFeatures({ layers: [layer.id] });
        //         features.forEach(feature => {
        //             // 获取事件坐标点
        //             let event_position = feature.geometry.coordinates
        //             // 转换为turf -- point对象
        //             let point = turf.point(event_position)
        //             var result = turf.booleanContains(polygon, point)
        //             if (result) {
        //                 selectLists.value.push(feature.properties)
        //                 console.log(selectLists.value)
        //             }
        //         })
        //     })
        // });
    }


    return {
        tool,
        selectQuery,
        selectLists,
    }
}